<template>
	<view>
		<up-loading-page :loading="true" loadingText="loading..." v-if="showLoading"></up-loading-page>
	</view>
	<!-- 主 -->
	<view class="layout">
		<cu-custom :isBack="true" background="rgba(246, 246, 246, 1.0)">
			<block slot="content">订单确认</block>
		</cu-custom>

		<navigator url="/pages/user_address/user_address" class="choose-address" v-if="addressObj.contact!==''">
			<view class="address-map">
				<image src="../../static/我的地址@2x.png" mode=""></image>
			</view>

			<!-- 地方 -->
			<view class="address-box">
				<!-- 标题 -->
				<view class="address-title">
					<view class="address-left">{{ addressObj.contact }} {{ addressObj.telephone }}</view>
				</view>
				<!-- 内容 -->
				<view class="address-content">
					<view class="address-sss">{{ addressObj.province }} {{ addressObj.city }} {{ addressObj.district }}</view>
					<view class="address-dec">{{ addressObj.address }}</view>
				</view>
			</view>

			<!-- 右边箭头 -->
			<view class="address-icon-right">
				<up-icon name="arrow-right" color="#434343"></up-icon>
			</view>
		</navigator>
		<!-- 空白显示 -->
		<view class="address-list-empy" v-if="addressObj.contact===''">
			<up-empty mode="address" icon="http://cdn.uviewui.com/uview/empty/address.png">
				<up-button text="选择地址" @click="goPage" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></up-button>
			</up-empty>
		</view>

		<!-- 东西 -->
		<view class="address-center">
			<!-- 图片 -->

			<view class="address-img">
				<image :src="goodsMainImage" mode=""></image>
			</view>

			<!-- 右边消息 -->
			<view class="address-right-content">
				<!-- 标题 -->
				<view class="goods-title-top">{{ goodsName }}</view>

				<!-- 数量 -->

				<view class="goods-count-left">
					<view class="goods-left">积分{{ goodsPrice }}</view>

					<!-- 数量 -->
					<view class="goods-right">x{{ goodscount }}</view>
				</view>
			</view>

		</view>
		<!-- 信息 -->
		<view class="goods-info">
			<up-cell-group>
				<up-cell title="配送服务" :value="deliveryService" :isLink="true" arrowDirection="right"></up-cell>
				<up-cell title="订单备注" value="-无备注" :isLink="true" arrowDirection="right"></up-cell>
			</up-cell-group>
		</view>


		<!-- 底部 -->

		<view class="goods-pay">

			<!-- goods- -->
			<view class="goods-pay-left">
				<view class="goods-zi">兑换积分：</view>
				<view class="goods-shu">{{ allprice }}</view>
			</view>

			<!-- 幻月 -->
			<view @click="submit" class="goods-payment">
				确认兑换
			</view>

		</view>

	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref, onMounted, computed } from 'vue'
import api from '../../common/apiService';
import { code } from '../../uni_modules/uview-plus/libs/function/test';
import request from '../../common/request';
const {
	getGoodsDetail,
	getAddressList
} = api;
// 加载动画
const showLoading = ref(true)
const goodsPrice = ref(0);
const goodsName = ref('');
const goodsMainImage = ref('');
const goodsId = ref(0)
const goodscount = ref(0)
const selected = ref(0);
// 本地的数据
const addressObj = ref({
	contact: '',
	telephone: '',
	province_id: '',
	city_id: '',
	district_id: '',
	province: '',
	city:'',
	district:'',
	uid: 0,
	is_default: Boolean(0),
});


// 判断
onMounted(()=>{
	const uid = uni.getStorageSync('uid')
	if(uid===''){
		uni.showToast({
			title:'你未登录请先登录',
			icon:'error',
			duration:3000
		}).then(()=>{
			setTimeout(()=>{
				uni.redirectTo({
					url:'/pages/auth/auth'
				})
			},2500)
		})
	}
})


onMounted(() => {
	const gid = goodsId.value;
	const uid = uni.getStorageSync('uid');
	getGoodsDetail(gid).then(data => {
		console.log(data)
		if (data) {

			goodsPrice.value = data.integral;
			goodsName.value = data.name;
			goodsMainImage.value = data.image;
			// console.log(data.goods_image);
		}
	}).catch(e => {
		console.log(e)
		// uni.showToast({
		// 	title: e.msg || '请求失败，请稍后再试',
		// 	icon: 'none'
		// });
	}).finally(() => {
		showLoading.value = false;
	});
	getAddressList(uid).then(data => {
		console.log("地址",data)
		if (data) {
			const defaultAddress = data.find(item => item.is_default === 1);
			if (defaultAddress) {
				addressObj.value = defaultAddress;
			}else {
				addressObj.value = data[0];
			}
		}
	}).catch(e => {
		console.log(e)
		// uni.showToast({
		// 	title: e.msg || '请求失败，请稍后再试',
		// 	icon: 'none'
		// });
	}).finally(() => {
		showLoading.value = false;
	});
});


// 全部
const allprice = computed(() => {
	return goodsPrice.value * goodscount.value;
});

// 接收参数
onLoad((e) => {
	console.log(e)
	goodsId.value = e?.goodsId
	goodscount.value = e?.goodscount
	selected.value = e?.selected
})
// 计算
const deliveryService = computed(() => {
	if (selected.value === 'trade') {
		return '普通快递，免费';
	} else if (selected.value === 'self') {
		return '自提';
	} else {
		return '';
	}
});


const region = ref('')

function submit(){
	// 点击兑换时
	 // if (addressObj.value.contact==='') {
	 //        // 如果 contact 为空，重定向到地址选择页面
	 //        uni.navigateTo({
	 //          url: '/pages/user_address/user_address'
	 //        });
		// 	return;
	 //      }
	
	
	
	const uid = uni.getStorageSync('uid')
	uni.request({
		url: request.baseUrl+ `o-buy`,
		method:'POST',
		data:{
			uid:uid,
			goods:[
				{item_id:goodsId.value,
				num:goodscount.value}
			],
			action:"order",
			pay_way:4
		},
		success(res) {
			console.log( "点击确定",res)
			if(res.data.code===200){
				uni.redirectTo({
					url:'/pages/exchange/exchange?ok=1'
				})
			}else{
				uni.redirectTo({
					url:'/pages/exchange/exchange?ok=0'
				})
			}
		},
		fail: (error) => {
				console.error('请求失败:', error);
				// console.log("地址")
			}
	})
}
// 选择地址
function goPage(){
	uni.redirectTo({
		url:'/pages/user_address/user_address'
	})
}

</script>

<style lang="scss" scoped>
.layout {
	background: #f6f6f6;

	.choose-address {
		width: 710rpx;
		height: 220rpx;
		// border: 1px solid red;
		background: #ffffff;
		margin: 0 20rpx 0 20rpx;
		border-radius: 10rpx;
		display: flex;

		.address-map {
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			// border: 1px solid red;
			margin: 36rpx 0 134rpx 24rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}


		// 内容
		.address-box {
			width: 451rpx;
			height: 130rpx;
			line-height: 130rpx;
			// border: 1px solid red;
			margin: 50rpx 0 35rpx 40rpx;
			background: #ffffff;


			.address-title {
				width: 451rpx;
				height: 40rpx;
				line-height: 40rpx;
				// border: 1px solid red;
				color: #222222;
				font-size: 30rpx;
				font-weight: 800;
				display: flex;

				.address-left {
					width: 451rpx;
					height: 40rpx;
					line-height: 40rpx;
					overflow: hidden;
					/* 隐藏超出部分 */
					white-space: nowrap;
					/* 不换行 */
					text-overflow: ellipsis;
				}
			}


			.address-content {
				width: 451rpx;
				height: 75rpx;
				line-height: 75rpx;
				font-size: 28rpx;
				color: #666666;

				.address-sss {
					width: 451rpx;
					height: 37rpx;
					line-height: 37rpx;
				}

				.address-dec {
					width: 451rpx;
					height: 37rpx;
					line-height: 37rpx;
					overflow: hidden;
					/* 隐藏超出部分 */
					white-space: nowrap;
					/* 不换行 */
					text-overflow: ellipsis;
				}
			}
		}

		.address-icon-right {
			width: 10rpx;
			height: 17rpx;
			// border: 1px solid red;
			margin: 56rpx 37rpx 0 100rpx;
		}
	}


	// 中间
	.address-center {
		width: 710rpx;
		height: 200rpx;
		border-bottom: 1rpx solid #f6f6f6;
		margin: 17rpx 20rpx 0 20rpx;
		background: #ffffff;
		border-radius: 10rpx;
		display: flex;

		.address-img {
			width: 120rpx;
			height: 120rpx;
			line-height: 120rpx;
			// border: 1px solid red;
			margin: 63rpx 0 0 30rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.address-right-content {
			width: 510rpx;
			height: 130rpx;
			// border: 1px solid red;
			margin: 64rpx 30rpx 0 31rpx;

			.goods-title-top {
				width: 499rpx;
				height: 29rpx;
				line-height: 29rpx;
				display: flex;
				font-size: 30rpx;
				color: #000000;
				font-weight: 800;
				overflow: hidden;
				/* 隐藏超出部分 */
				white-space: nowrap;
				/* 不换行 */
				text-overflow: ellipsis;
			}

			.goods-count-left {
				width: 499rpx;
				height: 25rpx;
				// border: 1px solid red;
				margin: 60rpx 0 0 0;
				display: flex;

				.goods-left {
					width: 200rpx;
					height: 25rpx;
					line-height: 25rpx;
					color: #ff6000;
					font-size: 26rpx;
				}

				.goods-right {
					width: 100rpx;
					height: 25rpx;
					line-height: 25rpx;
					font-size: 24rpx;
					margin-left: 200rpx;
					// border: 1px solid green;
					overflow: hidden;
					/* 隐藏超出部分 */
					white-space: nowrap;
					/* 不换行 */
					text-overflow: ellipsis;
				}
			}
		}
	}


	// 信息
	.goods-info {
		width: 710rpx;
		height: 209rpx;
		// border: 1px solid red;
		margin: 0 20rpx 0 20rpx;
		background: #ffffff;
	}

	.goods-pay {
		width: 750rpx;
		height: 128rpx;
		position: fixed;
		// border: 1px solid red;
		background: #ffffff;
		bottom: 0;
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
		display: flex;

		.goods-pay-left {
			width: 300rpx;
			height: 80rpx;
			// border: 1px solid red;
			margin: 20rpx 0 0 44rpx;
			display: flex;

			.goods-zi {
				width: 120rpx;
				height: 21rpx;
				line-height: 21rpx;
				font-size: 22rpx;
				margin: 30rpx 0 0 0;
			}

			.goods-shu {
				width: 150rpx;
				height: 28rpx;
				line-height: 28rpx;
				color: #ff6000;
				font-size: 36rpx;
				margin: 21rpx 0 0 0;
				// border: 1px solid red;
				overflow: hidden;
				/* 隐藏超出部分 */
				white-space: nowrap;
				/* 不换行 */
				text-overflow: ellipsis;
			}
		}


		.goods-payment {
			width: 295rpx;
			height: 80rpx;
			// border: 1px solid red;
			margin: 18rpx 0 0 50rpx;
			background: #14288c;
			border-radius: 40rpx;
			color: #ffffff;
			box-sizing: border-box;
			// padding: 26rpx ;
			font-size: 30rpx;
			padding: 16rpx 0 0 87rpx;
		}
	}

}
</style>
